<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="库存跟踪" @clickLeft="back" />
			
			<uni-forms :modelValue="baseFormData" ref="form">
				
				
				
				<uni-forms-item v-show="authority == 0" label="连锁店:" style="margin-top: 15px; width: 70%; left: 12px;" name="chainStore">
						<uni-combox style="width: 95%;  margin-left: -10px;"  :candidates="candidates" placeholder="所有连锁店" v-model="chain"  @input="getHandle(chain)"></uni-combox>
				</uni-forms-item>
				<uni-forms-item v-show="authority != 0  " label="连锁店:" style="margin-top: 15px; width: 70%; left: 12px;" name="chainStore">
						<uni-combox style="width: 95%;  margin-left: -10px;"  :candidates="candidates" placeholder="请选择连锁店" v-model="chain"  @input="getHandle(chain)"></uni-combox>
				</uni-forms-item>
				<uni-forms-item  style="width: 70%; position: relative; left: 5%; top:-	10rpx" label="条码:"  name="barcode">
						<uni-easyinput  style="margin-left: -35rpx;" v-model="baseFormData.barcode" placeholder="请输入商品条码" />
				</uni-forms-item>
				
				
				<uni-forms-item  style="width: 70%; position: relative; left: 5%; top:-10rpx" label="货号:"  name="productCode">
						<uni-easyinput  style="margin-left: -35rpx;" v-model="productCode" placeholder="请输入商品货号" />
				</uni-forms-item>
				<button  style="background-color:orange;  width: 120rpx; height: 60rpx; left: 35%; position: relative; top: -61px;"  @click="searchProduct('center')"><text style="font-size: 15px; position: relative; top: -8px;""> 搜索</text></button>
				<text style="font-size: 22rpx; position: relative; left: 10%; top:-100rpx;color: orange;">提示：(不知道条码时，可以通过货号模糊查找信息)</text>
				<button  style="background-color:rgb(0,122,255);  width: 270rpx; height: 60rpx; right: 22%; top: -60rpx;"  @click="submit('center',)" ><text style="font-size: 15px; position: relative; top: -8px;""> 跟踪库存信息</text></button>
				<button  style="background-color:rgb(230,67,64);  width: 170rpx; height: 60rpx; left: 10%; position: relative; top: -68px;"  @click="clean()"><text style="font-size: 15px; position: relative; top: -8px;"> 清空</text></button>
			
			</uni-forms>
			
			
			<!-- 普通弹窗 -->
						<uni-popup ref="popup" background-color="#fff"  >
							<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
							<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
								<uni-table ref="table" border stripe style="position: relative; top: 15px;">
									<uni-tr>
										<uni-th width="10" align="center">编号</uni-th>
										<uni-th width="50" align="center">货号</uni-th>
										<uni-th width="180" align="center">品牌</uni-th>
										<uni-th width="100" align="center">颜色</uni-th>
										<uni-th width="70" align="center">编辑</uni-th>
									</uni-tr>
									<uni-tr  v-for="(item, index) in productList" :key="index">
										<uni-td>{{index+1}}</uni-td>
										<uni-td>{{item.priductCode}}</uni-td>
										<uni-td>{{item.brand}}</uni-td>
										<uni-td>{{item.color}}</uni-td>
										<uni-td><uni-icons type="checkmarkempty" size="20" @click="selected(item.productBarCode)"></uni-icons></uni-td>
									</uni-tr>
								
								</uni-table>
								
							</view>
							</scroll-view>
						</uni-popup>
			
			
			<uni-table ref="table" border stripe style="position: relative; top: -45px;">
				<uni-tr>
					<uni-th width="60" align="center">编号</uni-th>
					<uni-th width="200" align="center">连锁店</uni-th>
					<uni-th width="200" align="center">发生日期</uni-th>
					<uni-th width="170" align="center">描述</uni-th>
					<uni-th width="50" align="center">数量</uni-th>
					<uni-th width="60" align="center">编码</uni-th>
					<uni-th width="50" align="center">单据号</uni-th>
					
				</uni-tr>
				<uni-tr  v-for="(item, index) in tableData" :key="index">
					<uni-td>{{index+1}}</uni-td>
					<uni-td>{{item.chainStoreName}}</uni-td>
					<uni-td>{{item.date}}</uni-td>
					<uni-td>{{item.describe}}</uni-td>
					<uni-td>{{item.number}}</uni-td>
					<uni-td>{{item.code}}</uni-td>
					<uni-td>{{item.documentNumber}}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td></uni-td>
					<uni-td></uni-td>
					<uni-td></uni-td>
					<uni-td>当前库存</uni-td>
					<uni-td>{{sumNumber}}</uni-td>
					<uni-td></uni-td>
					<uni-td></uni-td>
				</uni-tr>
			
			</uni-table>
	</view>
</template>

<script>
	import {baseUrl,imgPath} from 'libs/util/global'
	export default {
		data() {
			return {
				//当前库存
				sumNumber: 0,
				//滚动条
				scrollTop: 0,
				old: {
				    scrollTop: 0
				   }, 
				type: 'center',
				chain: '',
				productCode: '', // 产品货号
				productList: [], // 产品信息列表
				tableData: [],
				// 连锁店combox下拉框
				candidates: [],
				store: [], // 连锁店下拉框
				baseFormData:{
					chainStore:undefined,
					barcode:undefined

				},
				loginUserId: null,
				loginUserType: null,
				authority: null,
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: 'userId',
				success:(res)=> {
					// console.log(res.data + "登录用户id:"+res.data)
					this.loginUserId = res.data
				}
			});
			uni.getStorage({
				key: 'isChain',
				success:(res) =>{
					// console.log(res.data + "登录用户类型:"+res.data)
					this.loginUserType = res.data
				}
			});
			uni.getStorage({
				key: 'authority',
				success:(res) =>{
					// console.log(res.data + "登录用户权限:"+res.data)
					this.authority  = res.data
				}
			});
		},
		mounted() {
			this.getStorage()	
		},
		methods: {
			// 左上角返回按钮
			back() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			
			// 获取连锁店下拉框
			getStorage() {
				console.log(this.authority)
				// 连锁店自营者 自己所拥有的店铺
				let url = baseUrl+'/chain/store/' +this.loginUserId + "/" + this.loginUserType
				uni.request({
					url: url,
					header: {'content-type': 'application/x-www-form-urlencoded'},
					method: 'GET',
					data: {},
					success: (res) => {
						this.store = res.data.data
						for (var i = 0; i < this.store.length; i++) {
							this.candidates.push(this.store[i].text) 
						}
					}
				})
				
				
			},
			
			// 清空表单信息
			clean(){
				this.baseFormData.barcode = undefined
				this.baseFormData.productCode = undefined
			},
			
			// 产品货号模糊查询
			searchProduct(type){
			// 此处总部过滤第三方条码，连锁店过滤其他店铺条码
			
			console.log(this.loginUserId)
			console.log(this.loginUserType)
			
				
				
				
			
			// 判断货号是否为空，并长度大于三
			if(this.productCode.length >=3){
				
				this.type = type
				this.$refs.popup.open(type)
				
				uni.showLoading({
				title: '加载中.....'
				})
				
				let url = ''
				// 判断是否为连锁店用户
				if(this.loginUserType == 1){
					// 连锁店登录用户id
					url = baseUrl+'/likeProduct/'+ this.productCode + "/"+this.loginUserId
				}else {
					url = baseUrl+'/likeProduct/'+ this.productCode + "/"+ 0
				}

				uni.request({
					url: url,
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'POST',
					data: {},
					success: (res) => {
						setTimeout(function() {
							uni.hideLoading();
						}, 300);
						console.log(res)	
						this.productList = res.data.data
					}
				})
			}else{
				uni.showToast({
					title: '产品货号不能低于3位，请重新输入!',
					icon: 'none',
					duration: 1000
				});
			}
			
			
			
			},
			
			// 选中货品
			selected(productBarCode){
				console.log(productBarCode)
				this.baseFormData.barcode = productBarCode
				this.$refs.popup.close()
			},
			
			// 清空表单信息
			clean(){
				this.baseFormData.barcode = undefined
				this.baseFormData.productCode = undefined
			},
			// 店铺名称
			getHandle(chain){
				console.log("查看chain:"+chain)				
				if(chain == ""){
					this.baseFormData.chainStore = null
				}else{
					console.log("进入判断")
					for (var i = 0; i < this.store.length; i++) {
						if(this.store[i].text === chain){
							console.log(this.store[i].value)
							// 将店铺 id 赋值给chainStore
							this.baseFormData.chainStore = this.store[i].value
							
						}
					}
				}
			},
			
			//滚动条
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 库存跟踪
			submit(type){
				// 判断条码合法性
				let chainStore = this.baseFormData.chainStore
				console.log(chainStore)
				let barcode = this.baseFormData.barcode
				console.log(barcode)
				if(this.loginUserType ==1  && (chainStore == '' || chainStore == null)){
					uni.showToast({
						title: '请选择连锁店!',
						icon: 'none',
						duration: 1000
					});
				}else{
					if(barcode == '' || barcode == null){
							uni.showToast({
								title: '请输入商品条码',	
								icon: 'none',
								duration: 1000
							});
							
							
					}else{
						
						if(barcode.match('^[0-9]{12}$') && barcode != ''){
							 console.log("进入后台匹配")
							 
							uni.showLoading({
							title: '加载中.....'
							})
							uni.request({
								url: baseUrl+'/productHistory',
								header: {
									'content-type': 'application/json'
								},
								method: 'POST',
								data: {
									chainStoreId: this.baseFormData.chainStore,
									barCode: this.baseFormData.barcode
								},
								success: (res) => {
									setTimeout(function() {
										uni.hideLoading();
									}, 100);
									console.log(res)
									if(res.data.data.length != 0){
										
										this.tableData = res.data.data
										for (var i = 0; i < this.tableData.length; i++) {
											this.sumNumber += this.tableData[i].number
										}
									}else{
										this.tableData = []
										this.sumNumber = 0
										uni.showToast({
											title: '无法找到产品信息',
											icon: 'none',
											duration: 1000
										});
									}
									
								}
							})
						
						}else{
							uni.showToast({
								title: '请输入正确的商品条码!',
								icon: 'none',
								duration: 1000
							});
						}
					}
				}
				
				
				
				
				

			}
		}
	}
</script>

<style>

.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		width:320px;
		height: 550px;
		background-color: #fff;
	}

</style>
